<template>
    <div class="Layout">
        <layout-header @save="saveClick" @delAll="delAllClick" @guide="guideClick" @preview="previewClick"/>
        <layout-left @moved="moved"/>
        <layout-preview :form-id="formId" ref="preview" @setComponent="setComponent" @setRow="setComponent"/>
        <layout-right
            ref="layoutRight"
            @titleClick="titleClick"
            @imgloadClick="imgloadClick"
            @uploadClick="uploadClick"
            @butClick="butClick"
            @bgClick="bgClick"
            @paddingClick="paddingClick"
            :obj="obj"/>
        <el-dialog
            title="内容编辑"
            :visible.sync="dialogVisible"
            width="50%"
            class="dialog"
        >
            <html5-editor :content="content" @update="updateData"/>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submitClick">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 多图片 图标 选择 -->
        <el-dialog width="80%" title="选择媒体图片" :visible.sync="dialogUploadVisible">
            <div>
                <code>正在使用的图片</code>
                <div class="sliderImg-box" v-if="obj.swiperSlides">
                    <div class="sliderImg" v-for="(img,index) in obj.swiperSlides" :key="index">
                        <img :src="img" alt="加载中">
                        <div class="info">
                            <div class="icons-box clearfix">
                                <div class="icon-close" title="删除图像" @click="delSliderClick(index)">
                                    <i class="iconfont icon-jian1"/>
                                </div>
                                <div class="icon-ibox" title="切换图像" @click="switchClick(index)">
                                    <i class="iconfont icon-qiehuan1"/>
                                </div>
                                <div class="icon-ibox" title="图像链接" @click="linkClick(index)">
                                    <i class="iconfont icon-lianjie"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="icon-add" title="添加图像" @click="addSliderClick">
                        <i class="iconfont icon-jia1"/>
                    </div>
                </div>
                <div class="sliderImg-box" v-if="obj.imgTextBox">
                    <div class="sliderImg" v-for="(img,index) in obj.imgTextBox" :key="index">
                        <img v-if="img.imgUrl" :src="img.imgUrl" alt="加载中">
                        <i v-else-if="img.icon" class="iconfont" :class="img.icon"/>
                        <div class="info">
                            <div class="icons-box clearfix">
                                <div class="icon-ibox" title="切换图像" @click="switchClick(index)">
                                    <i class="iconfont icon-qiehuan1"/>
                                </div>
                                <div class="icon-ibox" title="图像链接" @click="linkClick(index)">
                                    <i class="iconfont icon-lianjie"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 多图片选择 上传 -->
            <el-dialog
                width="80%"
                title="选择一个图片"
                :visible.sync="innerVisible"
                append-to-body>
                <div class="upload-box">
                    <el-upload
                        :action="action"
                        multiple
                        :limit="3"
                    >
                        <el-button type="primary">上传图像</el-button>
                        <span> <span class="ml10">-或者-</span> <span class="ml10" style="color:#262626">添加图像地址</span></span>
                    </el-upload>
                    <div class="mt10">
                        <el-input class="imgUrlInput" v-model="imgUrl" placeholder="https:// www.vuelayout.com/logo.png"/>
                        <span class="addImgUrl" :class="{'active': imgUrl}" @click="addImgUrlClick">Add</span>
                    </div>
                </div>
                <div class="img-box clearfix">
                    <div class="img-item f-left" v-for="(url,index) in imgBox" :key="index">
                        <div class="icon-close" @click="delImgClick(index)">
                            <i class="iconfont icon-jian"/>
                        </div>
                        <div :class="{imgActive: imgActive==index}"><img :src="url" @click="selectImgClick(index)" @dblclick="makeSureClick" alt="加载中"></div>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="innerVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="makeSureClick">确 定</el-button>
                </span>
            </el-dialog>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogUploadVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="dialogUploadVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 单图片选择 上传 -->
        <el-dialog width="80%" title="选择媒体图片" :visible.sync="dialogImgloadVisible">
            <div>
                <code>正在使用的图片</code>
                <div class="sliderImg-box">
                    <div class="sliderImg">
                        <img v-if="obj.image" :src="obj.image" alt="加载中">
                        <i v-else-if="obj.icon" class="iconfont" :class="obj.icon"/>
                        <div class="info">
                            <div class="icons-box clearfix">
                                <div class="icon-ibox" title="图像链接" @click="linkClick(-1)">
                                    <i class="iconfont icon-lianjie"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="upload-box">
                <el-upload
                    :action="action"
                    multiple
                    :limit="3"
                >
                    <el-button type="primary">上传图像</el-button>
                    <span> <span class="ml10">-或者-</span> <span class="ml10" style="color:#262626">添加图像地址</span></span>
                </el-upload>
                <div class="mt10">
                    <el-input class="imgUrlInput" v-model="imgUrl" placeholder="https:// www.vuelayout.com/logo.png"/>
                    <span class="addImgUrl" :class="{'active': imgUrl}" @click="aloneImgUrlClick">Add</span>
                </div>
            </div>
            <div class="img-box clearfix">
                <div class="img-item f-left" v-for="(url,index) in imgBox" :key="index">
                    <div class="icon-close" @click="delImgClick(index)">
                        <i class="iconfont icon-jian"/>
                    </div>
                    <div :class="{imgActive: imgActive==index}"><img :src="url" @click="aloneSelectImgClick(index)" @dblclick="dialogImgloadVisible=false" alt="加载中"></div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogImgloadVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="dialogImgloadVisible=false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 多卡片标题编辑 -->
        <el-dialog :title="titleName+'编辑'" :visible.sync="dialogTitleVisible">
            <div class="clearfix">
                <div class="form-item f-left" v-for="(item, index) in obj.imgTextBox" :key="index">
                    <label>{{ titleName+(index+1) }}</label>
                    <el-button size="mini" @click="butClick(['imgTextBox',item, titleType, index])">编辑</el-button>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogTitleVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <!-- 多卡片背景色设置 -->
        <el-dialog title="颜色设置" :visible.sync="dialogBgVisible">
            <div class="clearfix">
                <div class="form-item f-left" v-for="(item, index) in obj.imgTextBox" :key="index">
                    <label>卡片{{ index+1 }}</label>
                    <div v-if="item.backgroundColor" style="margin-left: 35px;margin-bottom: 5px;" class="bgColor" :style="{backgroundColor: item.backgroundColor}"/>
                    <el-select style="width: 100px;" v-model="item.backgroundColor" placeholder="请选择">
                        <el-option
                            v-for="(item, index) in bgColorOptions"
                            :key="index"
                            :label="item"
                            :value="item">
                            <span class="bgColor" :style="{background: item}"/>
                        </el-option>
                    </el-select>
                    <br>
                    <el-button class="mt10" type="primary" size="mini" @click="linkClick(index)">链接地址</el-button>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="dialogBgVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加图片链接地址 -->
        <el-dialog title="添加链接地址" width="30%" :visible.sync="dialogLinkVisible">
            <el-input v-model="linkUrl"/>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="submitLinkClick">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 多卡片间距编辑 -->
        <el-dialog title="卡片间距设置" :visible.sync="dialogPaddingVisible" width="870px" style="opacity: 0.9;">
            <div class="setLayout clearfix">
                <div class="form-item f-left" v-for="(item, index) in obj.imgTextBox" :key="index">
                    <label>卡片{{ (index+1) }}内边距</label>
                    <div class="form-item">
                        <div class="margin-box">
                            <el-input-number class="left" :min="0" v-model="item.paddingLeft"/>
                            <el-input-number class="right" :min="0" v-model="item.paddingRight"/>
                            <el-input-number class="top" :min="0" v-model="item.paddingTop"/>
                            <el-input-number class="bottom" :min="0" v-model="item.paddingBottom"/>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogPaddingVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
import steps from '@/utils/driver'
import { bgColorOptions, imgBoxOptions } from '@/utils/selectOptions'
import Html5Editor from '@/components/html5-editor'
import draggable from 'vuedraggable'
import LayoutHeader from '@/components/layout/layout-header'
import LayoutLeft from '@/components/layout/layout-left'
import LayoutRight from '@/components/layout/layout-right'
import LayoutPreview from '@/components/layout/layout-preview'
import { mapActions } from 'vuex'
export default {
    components: {
        LayoutHeader,
        LayoutLeft,
        LayoutRight,
        LayoutPreview,
        draggable,
        Html5Editor
    },
    data() {
        return {
            driver: null,
            isDriver: localStorage.getItem('isDriver'),
            content: '',
            obj: {},
            dialogVisible: false,
            dialogUploadVisible: false,
            dialogImgloadVisible: false,
            outerVisible: false,
            innerVisible: false,
            dialogTitleVisible: false,
            dialogLinkVisible: false,
            dialogBgVisible: false,
            dialogPaddingVisible: false,
            bgColorOptions: bgColorOptions,
            type: {},
            typeIndex: '',
            typeTitle: '',
            titleType: '',
            titleName: '',
            action: '', // 上传图片的接口
            imgUrl: '', // 添加的图片地址
            linkUrl: '', // 添加图片链接属性
            imgActive: -1,
            imgBox: imgBoxOptions,
            switchImgIndex: -1,
            SliderImgType: 'img',
            formId: ''
        }
    },
    created() {
        if (this.$route.query.formId) {
            this.formId = Number(this.$route.query.formId)
        }
    },
    mounted() {
        if (this.isDriver) {
            return false
        }
        this.setDriver(true)
        this.guideClick()
    },
    methods: {
        ...mapActions({
            setDriver: 'set_is_driver'
        }),
        moved(value) {
            console.log(value)
            if (value.srcElement == value.to) {
                return
            }
            if (value.to.className) {
                if (value.to.className == 'drag-box') {
                    this.$refs.preview.setRow(value.newIndex)
                } else if (value.to.id == 'baseTab') {
                    console.log('暂不支持tab拖拽联动')
                } else {
                    const className = value.to.className.split(' ')[1]
                    const index = Number(className.split('')[className.length - 1])
                    const key = className.substring(0, className.length - 1)
                    const childIndex = value.newIndex
                    this.$refs.preview.setComponent(index, key, childIndex)
                }
            }
        },
        // 操作指南
        guideClick() {
            this.driver = new Driver()
            this.driver.defineSteps(steps)
            this.driver.start()
        },
        //  预览
        previewClick() {
            this.$refs.preview.previewClick()
            this.$refs.layoutRight.saveClick()
        },
        // 布局组件设置
        setComponent(obj) {
            this.obj = obj
        },
        // 清空数据
        delAllClick() {
            this.$refs.preview.delAllClick()
        },
        // 保存数据
        saveClick() {
            this.$refs.preview.saveClick()
            this.$refs.layoutRight.saveClick()
        },
        // 更新文本编辑器内容
        updateData(content) {
            if (content) {
                this.content = content
            } else {
                this.content = ''
            }
        },
        // 提交编辑的内容
        submitClick() {
            if (this.type == 'imgTextBox') {
                this.obj[this.type][this.typeIndex][this.typeTitle] = this.content
            } else {
                this.obj[this.type] = this.content
            }

            this.dialogVisible = false
        },
        // 打开 编辑文本内容
        butClick(value) {
            this.type = value[0]
            let content = ''
            if (value.length == 4) {
                this.typeTitle = value[2]
                this.typeIndex = value[3]
                content = value[1][this.typeTitle]
            } else {
                content = value[1]
            }
            this.content = content
            this.dialogVisible = true
        },
        // 打开 多图片 上传切换图片操作
        uploadClick(value) {
            this.dialogUploadVisible = true
            this.obj = value
        },
        // 打开 单图片 上传切换图片操作
        imgloadClick(value) {
            this.dialogImgloadVisible = true
            this.obj = value
        },
        // 添加轮播图
        addSliderClick() {
            this.innerVisible = true
            this.imgUrl = ''
            this.SliderImgType = 'addSliderImg'
            this.imgActive = -1
        },
        switchClick(index) {
            this.innerVisible = true
            this.switchImgIndex = index
            this.SliderImgType = 'switchSliderImg'
            this.imgUrl = ''
            this.imgActive = -1
        },
        // 删除轮播图
        delSliderClick(index) {
            this.obj.swiperSlides.splice(index, 1)
        },
        // 删除imgBox中的图片
        delImgClick(index) {
            this.imgBox.splice(index, 1)
        },
        // 选中图片
        selectImgClick(index) {
            this.imgActive = index
        },
        // 向imgBox里面添加一张图像
        addImgUrlClick() {
            if (this.imgUrl) {
                this.innerVisible = false
                if (this.SliderImgType == 'addSliderImg') {
                    this.obj.swiperSlides.push(this.imgUrl)
                } else if (this.SliderImgType == 'switchSliderImg') {
                    this.$set(this.obj.swiperSlides, this.switchImgIndex, this.imgUrl)
                }
            } else {
                return
            }
        },
        // 多图片 切换 点击确定
        makeSureClick() {
            this.innerVisible = false
            if (this.SliderImgType == 'switchSliderImg') {
                if (this.imgActive != -1) {
                    if (this.obj.swiperSlides) {
                        this.$set(this.obj.swiperSlides, this.switchImgIndex, this.imgBox[this.imgActive])
                    } else if (this.obj.imgTextBox) {
                        this.obj.imgTextBox[this.switchImgIndex]['imgUrl'] = this.imgBox[this.imgActive]
                    }
                }
            } else if (this.SliderImgType == 'addSliderImg') {
                if (this.imgActive != -1) {
                    this.obj.swiperSlides.push(this.imgBox[this.imgActive])
                }
            }
        },
        // 单图片 切换 点击确定
        aloneSelectImgClick(index) {
            this.imgActive = index
            this.obj.image = this.imgBox[index]
        },
        // 单图片 添加图片链接切换图片
        aloneImgUrlClick() {
            if (this.imgUrl) {
                this.obj.image = this.imgUrl
            }
        },
        // 打开 多标题编辑
        titleClick(value) {
            this.dialogTitleVisible = true
            this.obj = value[0]
            this.titleType = value[1]
            if (value[1] == 'info') {
                this.titleName = '内容'
            } else if (value[1] == 'desc') {
                this.titleName = '描述'
            } else {
                this.titleName = '标题'
            }
        },
        // 添加图片链接地址
        linkClick(index) {
            this.linkUrl = ''
            this.switchImgIndex = index
            this.dialogLinkVisible = true
        },
        // 添加图片链接地址确定
        submitLinkClick() {
            if (this.obj.swiperSlides) {
                // this.obj.imgTextBox[this.switchImgIndex]['httpUrl'] = this.linkUrl
            } else if (this.obj.imgTextBox) {
                this.obj.imgTextBox[this.switchImgIndex]['httpUrl'] = this.linkUrl
            } else {
                this.obj.httpUrl = this.linkUrl
            }
            this.dialogLinkVisible = false
        },
        // 背景色设置
        bgClick() {
            this.dialogBgVisible = true
        },
        paddingClick() {
            this.dialogPaddingVisible = true
        }
    }
}
</script>
<style lang="scss" scoped>
   .Layout {
        width: 100%;
        height: 100%;
        .icon-add{
            cursor: pointer;
            margin-left: 10px;
            .iconfont{
                font-size: 30px;
            }
        }
        .form-item{
            padding: 0 10px;
            text-align: center;
            label{
                display:block;
                padding: 10px 0;
            }
        }
    }
    .bgColor{
        display: block;
        width: 30px;
        height: 30px;
    }
    .sliderImg-box,.img-box{
        display: flex;
        position: relative;
        flex-wrap: wrap;
    }
    .img-box{
        height: 300px;
        overflow: auto;
    }
    .sliderImg, .img-item{
        flex: 0 0 16.66666667%;
        max-width: 16.66666667%;
        margin: 5px 15px 5px 0;
        height: auto;
        box-sizing: border-box;
        position: relative;
        border-radius: 2px;
        position: relative;
        overflow: hidden;
        height: 150px;
        img{
            width: 100%;
            vertical-align: top;
            cursor: pointer;
            border-radius: 2px;
            object-fit: over;
            height: 150px;
        }
    }
    .img-item{
        overflow: visible;
        margin: 5px 0;
        padding-right: 10px;
        .icon-close{
            position: absolute;
            left: 0px;
            top: 0px;
            padding: 5px;
            background: rgba(255,255,255,0.6);
            cursor: pointer;
        }
    }
    .sliderImg{
        &:hover{
            .info{
                transform: translateY(0);
            }

        }

        .info{
            position:absolute;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.7);
            width: 100%;
            height: 100%;
            transition: all ease 300ms;
            transform: translateY(100%);
            .icons-box{
                position:absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);

            }
        }
        .icon-close,.icon-ibox{
            border: 1px solid #fff;
            border-radius: 2px;
            padding: 5px 6px;
            text-align: center;
            display: inline-block;
            color:#fff;
            cursor: pointer;
            &:hover{
                background-color:#409EFF;
                border: 1px solid #409EFF;
            }
        }
        .icon-ibox{
            margin-left: 8px;
        }
    }
    .upload-box{
        border: 1px solid #e9ecef;
        padding: 20px;
        background: #fcfcfc;
        width: calc(100% - 15px);
    }
    .imgUrlInput{
        width: calc(100% - 80px);
    }
    .addImgUrl{
        width: 60px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        font-size: 16px;
        margin-left: 5px;
        border-radius: 3px;
    }
    .addImgUrl.active{
        background:#66b1ff;
        color:#fff;
        cursor: pointer;
    }
    .img-item .imgActive{
        box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.8);
        border-radius: 2px;
        box-sizing: border-box;
        img{
            display: block;
        }
    }
</style>
